﻿<div class="demo-description">
    <h2>
        <DemoNavLink Link="Toolbar#ItemTemplates" />Item Templates
    </h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar">Toolbar</a> component supports item templates that customize item layout and appearance. Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem.Template">Template</a> property to define a template for a specific toolbar item.
    </p>
</div>

<div class="card demo-card">
    <div class="card-header border-0 p-2">
        <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain" @key="@ThemeName">
            <Items>
                <DxToolbarItem>
                    <Template>
                        <div class="dxbs-textbox">
                            <input type="text" class="form-control form-control-sm" placeholder="Search...">
                            <span class="dxbs-feedback">
                                <span class="d-flex pl-2 pr-2" role="button" style="color:gray">
                                    <span class="tb-icon tb-icon-search"></span>
                                </span>
                            </span>
                        </div>
                    </Template>
                </DxToolbarItem>
                <DxToolbarItem IconCssClass="tb-icon tb-icon-refresh" Tooltip="Refresh" BeginGroup="true" />
                <DxToolbarItem IconCssClass="tb-icon tb-icon-settings" Tooltip="Settings" />
            </Items>
        </DxToolbar>
    </div>
</div>

<CodeSnippet_Toolbar_Templates />

@code {
    [CascadingParameter(Name = "ThemeName")] string ThemeName { get; set; }
}
